<!--
//================================================
/*

Turn Off the Lights
The entire page will be fading to dark, so you can watch the video as if you were in the cinema.
Copyright (C) 2011 Stefan vd
www.stefanvd.net

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.


To view a copy of this license, visit http://creativecommons.org/licenses/GPL/2.0/

*/
//================================================
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Turn Off the Lights - Options</title>
<link href="css/options.css" rel="stylesheet" type="text/css">
<!-- OpenSource jscolor file -->
<script src="jscolor/jscolor.js" type="text/javascript"></script>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
default_opacity = 80;

// Option to save current value to window.localStorage
function save_options(){
	window.localStorage['interval'] = $('interval').value;	
	window.localStorage['color'] = $('color').value;
	if($('pageaction').checked)window.localStorage['pageaction'] = 'true';
	else window.localStorage['pageaction'] = 'false';
	if($('autoplay').checked)window.localStorage['autoplay'] = 'true';
	else window.localStorage['autoplay'] = 'false';
	if($('playlist').checked)window.localStorage['playlist'] = 'true';
	else window.localStorage['playlist'] = 'false';
	if($('flash').checked)window.localStorage['flash'] = 'true';
	else window.localStorage['flash'] = 'false';
	if($('head').checked)window.localStorage['head'] = 'true';
	else window.localStorage['head'] = 'false';
	if($('fadein').checked)window.localStorage['fadein'] = 'true';
	else window.localStorage['fadein'] = 'false';
	if($('fadeout').checked)window.localStorage['fadeout'] = 'true';
	else window.localStorage['fadeout'] = 'false';
	if($('infobar').checked)window.localStorage['infobar'] = 'true';
	else window.localStorage['infobar'] = 'false';
	if($('sharebutton').checked)window.localStorage['sharebutton'] = 'true';
	else window.localStorage['sharebutton'] = 'false';
	if($('likebutton').checked)window.localStorage['likebutton'] = 'true';
	else window.localStorage['likebutton'] = 'false';
	if($('readera').checked)window.localStorage['readera'] = 'true';
	else window.localStorage['readera'] = 'false';
	if($('readern').checked)window.localStorage['readern'] = 'true';
	else window.localStorage['readern'] = 'false';
	if($('shortcutlight').checked)window.localStorage['shortcutlight'] = 'true';
	else window.localStorage['shortcutlight'] = 'false';
	if($('eyea').checked)window.localStorage['eyea'] = 'true';
	else window.localStorage['eyea'] = 'false';
	if($('eyen').checked)window.localStorage['eyen'] = 'true';
	else window.localStorage['eyen'] = 'false';
	if($('suggestions').checked)window.localStorage['suggestions'] = 'true';
	else window.localStorage['suggestions'] = 'false';
	if($('videoheadline').checked)window.localStorage['videoheadline'] = 'true';
	else window.localStorage['videoheadline'] = 'false';
	if($('eastereggs').checked)window.localStorage['eastereggs'] = 'true';
	else window.localStorage['eastereggs'] = 'false';
	if($('contextmenus').checked)window.localStorage['contextmenus'] = 'true';
	else window.localStorage['contextmenus'] = 'false';
	if($('mousespotlight').checked)window.localStorage['mousespotlight'] = 'true';
	else window.localStorage['mousespotlight'] = 'false';
	if($('viewcount').checked)window.localStorage['viewcount'] = 'true';
	else window.localStorage['viewcount'] = 'false';
	window.localStorage['lightimage'] = $('lightimage').value;	
	if($('lightimagea').checked)window.localStorage['lightimagea'] = 'true';
	else window.localStorage['lightimagea'] = 'false';
	if($('lightimagen').checked)window.localStorage['lightimagen'] = 'true';
	else window.localStorage['lightimagen'] = 'false';
	if($('eyealist').checked)window.localStorage['eyealist'] = 'true';
	else window.localStorage['eyealist'] = 'false';
	
// disable easter eggs
if($('mousespotlight').checked == true) {$('eastereggs').disabled = true;$('eastereggs').checked = false;} // eastereggs OFF
else {$('eastereggs').disabled = false;}; // active box eastereggs

// Excluded domains
var excludedDomainsBox = document.getElementById("excludedDomainsBox");
var excludedDomains = {};
for (var i = 0; i < excludedDomainsBox.length; i++)
	excludedDomains[excludedDomainsBox.options[i].value] = true;
    localStorage["excludedDomains"] = JSON.stringify(excludedDomains);
}

// Option to read current value from window.localStorage
if(!window.localStorage['fadein']) // find no localstore fadein
	window.localStorage['fadein'] = 'true'; // then default true

if(!window.localStorage['fadeout']) // find no localstore fadein
	window.localStorage['fadeout'] = 'true'; // then default true

if(!window.localStorage['readera']&&!window.localStorage['readern']) // find no localstore reader
{	window.localStorage['readern'] = 'true'; // then default true
	window.localStorage['readera'] = 'false'; // then default false
}

if(!window.localStorage['lightimagea']&&!window.localStorage['lightimagen']) // find no localstore reader
{	window.localStorage['lightimagen'] = 'true'; // then default true
	window.localStorage['lightimagea'] = 'false'; // then default false
}

if(!window.localStorage['shortcutlight']) // find no localstore shortcutlight
	window.localStorage['shortcutlight'] = 'false'; // then false

if(!window.localStorage['eyea']&&!window.localStorage['eyen']&&!window.localStorage['eyealist']) // find no localstore reader
{	window.localStorage['eyen'] = 'true'; // then default true
	window.localStorage['eyea'] = 'false'; // then default false
	window.localStorage['eyealist'] = 'false'; // then default false
}

if(!window.localStorage['eastereggs']) // find no localstore shortcutlight
	window.localStorage['eastereggs'] = 'true'; // then false

if(window.localStorage['interval'])
	default_opacity = window.localStorage['interval'];
	
function read_options(){
	if(window.localStorage['interval'])$('interval').value = window.localStorage['interval'];
	else $('interval').value = 80;
	if(window.localStorage['color']){$('color').value = window.localStorage['color'];}
	else {$('color').value = '000000';}
	if(window.localStorage['lightimage']){$('lightimage').value = window.localStorage['lightimage'];}
	else {$('lightimage').value = "http://turnoffthelights.googlecode.com/files/theater.jpg";}
	if(window.localStorage['lightimagea'] == 'true'){$('lightimagea').checked = true;$('example').style.background = 'url(' + $('lightimage').value + ')';}
	if(window.localStorage['lightimagen'] == 'true'){$('lightimagen').checked = true;$('example').style.background = '#' + $('color').value;}
	if(window.localStorage['pageaction'] == 'true')$('pageaction').checked = true;
	if(window.localStorage['autoplay'] == 'true')$('autoplay').checked = true;
	if(window.localStorage['playlist'] == 'true')$('playlist').checked = true;
	if(window.localStorage['flash'] == 'true')$('flash').checked = true;
	if(window.localStorage['head'] == 'true')$('head').checked = true;
	if(window.localStorage['fadein'] == 'true')$('fadein').checked = true;
	if(window.localStorage['fadeout'] == 'true')$('fadeout').checked = true;
	if(window.localStorage['infobar'] == 'true')$('infobar').checked = true;
	if(window.localStorage['sharebutton'] == 'true')$('sharebutton').checked = true;
	if(window.localStorage['likebutton'] == 'true')$('likebutton').checked = true;
	if(window.localStorage['readera'] == 'true')$('readera').checked = true;
	if(window.localStorage['readern'] == 'true')$('readern').checked = true;
	if(window.localStorage['shortcutlight'] == 'true')$('shortcutlight').checked = true;
	if(window.localStorage['eyea'] == 'true')$('eyea').checked = true;	
	if(window.localStorage['eyen'] == 'true')$('eyen').checked = true;
	if(window.localStorage['suggestions'] == 'true')$('suggestions').checked = true;
	if(window.localStorage['videoheadline'] == 'true')$('videoheadline').checked = true;
	if(window.localStorage['eastereggs'] == 'true')$('eastereggs').checked = true;
	if(window.localStorage['contextmenus'] == 'true')$('contextmenus').checked = true;
	if(window.localStorage['mousespotlight'] == 'true')$('mousespotlight').checked = true;
	if(window.localStorage['viewcount'] == 'true')$('viewcount').checked = true;
	if(window.localStorage['eyealist'] == 'true')$('eyealist').checked = true;
	
	// load current languages
	document.title = chrome.i18n.getMessage("optionpagetitle");
	setText('titelpageaction', chrome.i18n.getMessage('titelpageaction'));
	setText('titelopacity', chrome.i18n.getMessage('titelopacity'));
	setText('titelcolor', chrome.i18n.getMessage('titelcolor'));
	setText('titelautoplay', chrome.i18n.getMessage('titelautoplay'));
	setText('titelplaylist', chrome.i18n.getMessage('titelplaylist'));
	setText('titelflash', chrome.i18n.getMessage('titelflash'));
	setText('titelhead', chrome.i18n.getMessage('titelhead'));
	setText('titelfadein', chrome.i18n.getMessage('titelfadein'));
	setText('titelfadeout', chrome.i18n.getMessage('titelfadeout'));
	setText('titelinfobar', chrome.i18n.getMessage('titelinfobar'));
	setText('titelsharebutton', chrome.i18n.getMessage('titelsharebutton'));
	setText('titellikebutton', chrome.i18n.getMessage('titellikebutton'));
	setText('titelreader', chrome.i18n.getMessage('titelreader'));
	setText('desautoplay', chrome.i18n.getMessage('desautoplay'));
	setText('desplaylist', chrome.i18n.getMessage('desplaylist'));
	setText('desflash', chrome.i18n.getMessage('desflash'));
	setText('deshead', chrome.i18n.getMessage('deshead'));
	setText('desfadein', chrome.i18n.getMessage('desfadein'));
	setText('desfadeout', chrome.i18n.getMessage('desfadeout'));
	setText('desinfobar', chrome.i18n.getMessage('desinfobar'));
	setText('dessharebutton', chrome.i18n.getMessage('dessharebutton'));
	setText('deslikebutton', chrome.i18n.getMessage('deslikebutton'));
	setText('desreadera', chrome.i18n.getMessage('desreadera'));
	setText('desreadern', chrome.i18n.getMessage('desreadern'));
	setText('titelshortcutlight', chrome.i18n.getMessage('titelshortcutlight'));
	setText('desshortcutlight', chrome.i18n.getMessage('desshortcutlight'));
	setText('titeleye', chrome.i18n.getMessage('titeleye'));
	setText('deseyea', chrome.i18n.getMessage('deseyea'));
	setText('deseyen', chrome.i18n.getMessage('deseyen'));
	setText('titelsuggestions', chrome.i18n.getMessage('titelsuggestions'));
	setText('dessuggestions', chrome.i18n.getMessage('dessuggestions'));
	setText('titelvideoheadline', chrome.i18n.getMessage('titelvideoheadline'));
	setText('desvideoheadline', chrome.i18n.getMessage('desvideoheadline'));
	setText('titeleastereggs', chrome.i18n.getMessage('titeleastereggs'));
	setText('descontextmenus', chrome.i18n.getMessage('descontextmenus'));
	setText('titelcontextmenus', chrome.i18n.getMessage('titelcontextmenus'));
	setText('managed-prefs-text', chrome.i18n.getMessage('donatepromotext'));
	setText('titelviewcount', chrome.i18n.getMessage('titelviewcount'));
	setText('desviewcount', chrome.i18n.getMessage('desviewcount'));
	setText('titelimage', chrome.i18n.getMessage('titelimage'));
	setText('deseyealist', chrome.i18n.getMessage('deseyealist'));
	setText('addbutton', chrome.i18n.getMessage('addbutton'));
	setText('deletebutton', chrome.i18n.getMessage('deletebutton'));

	setText('textfoot', chrome.i18n.getMessage('textfoot'));
	
	setText('version', chrome.i18n.getMessage('version'));
	setText('changelog', chrome.i18n.getMessage('changelog'));
	setText('reportbug', chrome.i18n.getMessage('reportbug'));
	setText('reportlist', chrome.i18n.getMessage('reportlist'));
	
	setText('settings', chrome.i18n.getMessage('settings'));
	setText('basicsettings', chrome.i18n.getMessage('basicsettings'));
	setText('visualeffects', chrome.i18n.getMessage('visualeffects'));
	setText('advancedoptions', chrome.i18n.getMessage('advancedoptions'));
	
	setText('visualeffectstitle', chrome.i18n.getMessage('visualeffects')); //copy text
	setText('advancedoptionstitle', chrome.i18n.getMessage('advancedoptions')); //copy text
	
	// load tab div
	var tabListItems = document.getElementById('navbar').childNodes;
	for ( var i = 0; i < tabListItems.length; i++ ) {
		if ( tabListItems[i].nodeName == 'LI' ) {
		var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
		var id = getHash( tabLink.getAttribute('onclick') );
		tabLinks[id] = tabLink;
		contentDivs[id] = document.getElementById( id );
        }
    }
    
    // Assign onclick events to the tab links, and
    // highlight the first tab
    var i = 0;
 
    for ( var id in tabLinks ) {
    	tabLinks[id].onclick = showTab;
		tabLinks[id].onfocus = function() { this.blur() };
		if ( i == 0 ) tabLinks[id].className = 'navbar-item-selected';
		i++;
    }
    
    // Hide all content divs except the first
    var i = 0;
 
    for ( var id in contentDivs ) {
    	if ( i != 0 ) contentDivs[id].className = 'page hidden';
        i++;
    }

    // display version number
    function displayVersionNumber() {
        try {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", chrome.extension.getURL('manifest.json'), false);
          xhr.onreadystatechange = function() {
            if(this.readyState == 4) {
              var theManifest = JSON.parse(this.responseText);
              document.getElementById("version_number").innerText = theManifest.version;
            }
          };
          xhr.send();
        } catch (ex) {} // silently fail
    }
    displayVersionNumber();
	
// disable easter eggs
if($('mousespotlight').checked == true) {$('eastereggs').disabled = true;$('eastereggs').checked = false;} // eastereggs OFF
else {$('eastereggs').disabled = false;}; // active box eastereggs

// Excluded domains - sort these alphabetically
var excludedDomains = window.localStorage["excludedDomains"];
if(typeof excludedDomains == "undefined")
excludedDomains = JSON.stringify({'http://www.nytimes.com': true, 'http://www.blogger.com': true});
		
if(typeof excludedDomains == "string") {
	excludedDomains = JSON.parse(excludedDomains);
	var buf = [];
	for(var domain in excludedDomains)
		buf.push(domain);
        buf.sort();
	for(var i = 0; i < buf.length; i++)
		appendToListBox("excludedDomainsBox", buf[i]);
    }
}

// Add a filter string to the list box.
function appendToListBox(boxId, text) { var elt = document.createElement("option"); elt.text = text; elt.value = text; document.getElementById(boxId).add(elt, null); }

// find element to load
function setText(elementId, text) { document.getElementById(elementId).innerText = text; }

// tabel script
    var tabLinks = new Array();
    var contentDivs = new Array();
 
    function showTab() {
      var selectedId = getHash( this.getAttribute('onclick') );
 
      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'navbar-item-selected';
          contentDivs[id].className = 'page';
        } else {
          tabLinks[id].className = 'navbar-item';
          contentDivs[id].className = 'page hidden';
        }
      }
 
      // Stop the browser following the link
      return false;
    }
 
    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }
 
    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

// whitelist eye domain
function addWhitelistDomain() {
    var domain = document.getElementById("websiteurl").value;
    appendToListBox("excludedDomainsBox", domain);
    save_options();
}

function removeSelectedExcludedDomain() {
    var excludedDomainsBox = document.getElementById("excludedDomainsBox");
    for (var i = excludedDomainsBox.length-1; i >= 0; i--) {
        if (excludedDomainsBox.options[i].selected)
            excludedDomainsBox.remove(i);
    }
    save_options();
}

// YouTube preview sample
function test() {
if (head.checked == true){
$('samplechannel').style.zIndex = 100;$('samplechannel').style.position = 'relative';
$('samplevideobutton').style.zIndex = 100;$('samplevideobutton').style.position = 'relative';
$('samplesubbutton').style.zIndex = 100;$('samplesubbutton').style.position = 'relative';
} else{
$('samplechannel').style.zIndex = 1;$('samplechannel').style.position = 'relative';
$('samplevideobutton').style.zIndex = 1;$('samplevideobutton').style.position = 'relative';
$('samplesubbutton').style.zIndex = 1;$('samplesubbutton').style.position = 'relative';
}

if (playlist.checked == true)
{$('youtubemenu').style.zIndex = 100;$('youtubemenu').style.position = 'relative';}
else{$('youtubemenu').style.zIndex = 1;$('youtubemenu').style.position = 'relative';}

if (infobar.checked == true)
{$('samplevideoinfobar').style.zIndex = 100;$('samplevideoinfobar').style.position = 'relative';
$('sampleshowmore').style.zIndex = 100;$('sampleshowmore').style.position = 'relative';}
else{$('samplevideoinfobar').style.zIndex = 1;$('samplevideoinfobar').style.position = 'relative';
$('sampleshowmore').style.zIndex = 1;$('sampleshowmore').style.position = 'relative';}

if (likebutton.checked == true)
{$('samplelikebuttons').style.zIndex = 100;$('samplelikebuttons').style.position = 'relative';}
else{$('samplelikebuttons').style.zIndex = 1;$('samplelikebuttons').style.position = 'relative';}

if (sharebutton.checked == true)
{$('samplesharebuttons').style.zIndex = 100;$('samplesharebuttons').style.position = 'relative';}
else{$('samplesharebuttons').style.zIndex = 1;$('samplesharebuttons').style.position = 'relative';}

if (suggestions.checked == true){
$('samplesug').style.zIndex = 100;$('samplesug').style.position = 'relative';
$('listtextvideo1').style.zIndex = 100;$('listtextvideo1').style.position = 'relative';
$('listtextvideo2').style.zIndex = 100;$('listtextvideo2').style.position = 'relative';
$('listtextvideo3').style.zIndex = 100;$('listtextvideo3').style.position = 'relative';
$('youtubeview1').style.zIndex = 100;$('youtubeview1').style.position = 'relative';
$('youtubeview2').style.zIndex = 100;$('youtubeview2').style.position = 'relative';
$('youtubeview3').style.zIndex = 100;$('youtubeview3').style.position = 'relative';
$('youtubelink1').style.zIndex = 100;$('youtubelink1').style.position = 'relative';
$('youtubelink2').style.zIndex = 100;$('youtubelink2').style.position = 'relative';
$('youtubelink3').style.zIndex = 100;$('youtubelink3').style.position = 'relative';
} else {
$('samplesug').style.zIndex = 1;$('samplesug').style.position = 'relative';
$('listtextvideo1').style.zIndex = 1;$('listtextvideo1').style.position = 'relative';
$('listtextvideo2').style.zIndex = 1;$('listtextvideo2').style.position = 'relative';
$('listtextvideo3').style.zIndex = 1;$('listtextvideo3').style.position = 'relative';
$('youtubeview1').style.zIndex = 1;$('youtubeview1').style.position = 'relative';
$('youtubeview2').style.zIndex = 1;$('youtubeview2').style.position = 'relative';
$('youtubeview3').style.zIndex = 1;$('youtubeview3').style.position = 'relative';
$('youtubelink1').style.zIndex = 1;$('youtubelink1').style.position = 'relative';
$('youtubelink2').style.zIndex = 1;$('youtubelink2').style.position = 'relative';
$('youtubelink3').style.zIndex = 1;$('youtubelink3').style.position = 'relative';
}

if (videoheadline.checked == true)
{$('sampletitle').style.zIndex = 100;$('sampletitle').style.position = 'relative';$('sampletitle').style.color = 'white';}
else{$('sampletitle').style.zIndex = 1;$('sampletitle').style.position = 'relative';$('sampletitle').style.color = 'black';}

if (viewcount.checked == true)
{$('sampleviews').style.zIndex = 100;$('sampleviews').style.position = 'relative';$('sampleviews').style.color = 'white';}
else{$('sampleviews').style.zIndex = 1;$('sampleviews').style.position = 'relative';$('sampleviews').style.color = 'black';}

if (lightimagea.checked == true)
{$('lightimagen').checked = false;$('example').style.background = 'url(' + $('lightimage').value + ')';$('lightimage').disabled = false;$('color').disabled = true;}
else{$('lightimagen').checked = true;$('example').style.background = '#' + $('color').value;$('lightimage').disabled = true;$('color').disabled = false;}

if ((eyea.checked == false) && (eyen.checked == false))
{$('excludedDomainsBox').disabled = false;$('websiteurl').disabled = false;}
else{$('excludedDomainsBox').disabled = true;$('websiteurl').disabled = true;}
}
</script>
</head>

<body onload="read_options(); test();">
<script src="js/analytics.js"></script>

<div id="main-content">
	<div id="navbar-container">
	<h1 id="settings"></h1>
	<ul id="navbar">
	    <div><li id="searchPageNav" pagename="search"><a class="navbar-item" href="http://www.stefanvd.net"><input id="homepageURL" class="favicon-cell" type="url" style="background-image: url(images/s.png);" placeholder=" Stefanvd.net"></a></li></div> 
		<li><a onclick="#tab1" class="navbar-item navbar-item-selected"><span id="basicsettings"></span></a></li>
		<li><a onclick="#tab2" class="navbar-item"><span id="visualeffects"></span></a></li>
		<li><a onclick="#tab3" class="navbar-item"><span id="advancedoptions"></span></a></li>
	</ul>
	<footer>
	<span id="textfoot" class="license"></span>
	<a href="http://creativecommons.org/licenses/GPL/2.0/">GPL 2.0</a>.<br><br>
	<span class="style_bold">&copy; <script type="text/javascript">today=new Date();y0=today.getFullYear();document.write(y0);</script> Stefan vd. Some rights reserved.</span>
	</footer>
	</div>
	<div id="mainview">
	<div id="managed-prefs-banner">
		<span id="managed-prefs-icon">
			<a class="donatebutton" href="http://www.stefanvd.net/donate.htm">Donate Me</a>
		</span>
		<span id="managed-prefs-text"></span>
		<div id="managed-prefs-text-close" onclick="closediv()"><span style="display:none;">Close</span></div>
	<script>function closediv(){var messagebox = document.getElementById("managed-prefs-banner");messagebox.style.display ="none";}</script>
    </div>
		<div id="mainview-content">
			<div id="tab1" class="page">
			<h1>Turn Off the Lights</h1>
			<header>
			<span id="version"></span> <span id="version_number"></span> - <a id="changelog" href="http://code.google.com/p/turnoffthelights/wiki/ChangeLog"></a> - <a id="reportbug" href="http://code.google.com/p/turnoffthelights/issues/entry"></a> - <a id="reportlist" href="http://code.google.com/p/turnoffthelights/issues/list"></a>
			</header>
			<br>
			<div id="example"></div>
<table class="youtubepreview">
	<tr>
		<td colspan="3"><span class="watch-headline-title" id="sampletitle">gti Mortsel in 3D</span></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td colspan="3"><span class="watch-username" id="samplechannel">StefanvdLive</span><div class="watch-video-count" id="samplevideobutton">101 videos<img height="16" src="images/more.png" width="16"></div><button class="subscribe-button" id="samplesubbutton">Subscribe</button></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td colspan="3"><iframe id="dont-turn-off-the-lights" class="youtube-player" type="text/html" width="340" height="195" src="http://www.youtube.com/embed/cZY0atsYHdY" frameborder="0"></iframe></td>
		<td rowspan="4" valign="top">
		<table class="tabelplaylist" cellpadding="0" cellspacing="0">
										<tr>
											<td colspan="2"><span class="style_sug" id="samplesug">Suggestions</span></td>
										</tr>
										<tr>
											<td><img id="youtubeview1" alt="" height="61" src="images/1.png" width="80" class="youtubevideo"></td>
											<td>
											<a id="youtubelink1" href="#" class="youtubelink">Windows Dock</a><br><span id="listtextvideo1" class="style_videodes">987,654 views<br>stefanvdlive</span></td>
										</tr>
										<tr>
											<td><img id="youtubeview2" alt="" height="60px" src="images/2.png" width="80px" class="youtubevideo"></td>
											<td>
											<a id="youtubelink2" href="#" class="youtubelink">Font Size Extensions</a><br><span id="listtextvideo2" class="style_videodes">987,654 views<br>stefanvdlive</span></td>
										</tr>
										<tr>
											<td><img id="youtubeview3" alt="" height="60px" src="images/3.png" width="80px" class="youtubevideo"></td>
											<td>
											<a id="youtubelink3" href="#" class="youtubelink">NY City in 3D</a><br><span id="listtextvideo3" class="style_videodes">987,654 views<br>stefanvdlive</span></td>
										</tr>
									</table></td>
	</tr>
	<tr>
		<td>
		<img src="images/likedislike.png" id="samplelikebuttons"> <img src="images/share.png" id="samplesharebuttons">
		</td>
		<td><span class="style_videoview" id="sampleviews">4,301,189</span></td>
		<td><img src="images/graph.png" class="style_videoview"></td>
	</tr>
	<tr>
		<td colspan="3">
		<div id="samplevideoinfobar" class="videodescription">
		<div class="watch-uploaded"><span class="uploaded">Uploaded by <a class="uploaded-date" href="#">StefanvdLive</a> on <span id="uploaded-date">Feb 18, 2009</span></span><span class="videocomment"><br>GTI Mortsel a Belgium school in 3D.</span></div>
			<div class="watch-description-extra-info">
				<div class="watch-sparkbar-likes" style="width: 100.0%"></div>
				<div class="watch-sparkbar-dislikes" style="width: 0.0%"></div>
				<span class="watch-likes-dislikes"><span class="likes">88</span> likes, <span class="dislikes">0</span> dislikes</span>
			</div>
		</div>
		<button class="showmore" id="sampleshowmore">Show more</button>
		</td>
	</tr>
</table>
<br>
<div><img id="youtubemenu" alt="" height="27" src="images/playlist.png" width="840"></div>
				<section>
				<h3>Screen</h3>
				<div>
					<div class="radio">
						<label>
						<table>
							<tr>
								<td><span id="titelopacity"></span>:</td>
								<td><input type="range" id="slider" min="0" max="100" step="1" value="0" onchange="showValue(this.value);save_options();"></td>
								<td><input type="number" id="interval" min="0" max="100" step="1" value="0" onchange="showValue(this.value);save_options();" maxlength="3" size="4"></td>
								<td class="style_right" style="width:320px"></td>
								<td><span id="titeleastereggs"></span> <input id="eastereggs" type="checkbox"></td>
							</tr>
						</table>
						</label>
					</div>
					<div id="customHomePageGroup">
						<div class="radio">
							<label>
								<input id="lightimagen" type="radio" name="lightimage" value="never" onClick="test()">
								<span id="titelcolor"></span>:
							</label>
						</div>
						<div>
						<input id="color" class="color {pickerMode:'HSV'}" onchange="$('lightimagen').checked = true;document.getElementById('example').style.background = '#'+this.color;save_options();" onClick="test()">
						</div>
					</div>
					<div id="customHomePageGroup">
						<div class="radio">
							<label>
								<input id="lightimagea" type="radio" name="lightimage" value="only" onClick="test()">
								<span id="titelimage"></span>:
							</label>
						</div>
						<div>
							<input id="lightimage" type="url" onchange="$('lightimagea').checked = true;document.getElementById('example').style.background = 'url(' + this.value + ')';save_options();" onClick="test()">
						</div>
					</div>
				</div>
				</section>
				<section>			
				<h3 id="titelautoplay"></h3>
				<div>
				<label class="checkbox"><input id="autoplay" type="checkbox"><span id="desautoplay"></span></label>
				<div class="grey-text">HTML5 &amp; YouTube video</div>
				</div>
				</section>
				<section>
				<h3>YouTube</h3>
				<div><table>
				<tr><td><span id="titelplaylist" class="item"></span></td><td><label class="checkbox"><input id="playlist" type="checkbox" onClick="test()"><span id="desplaylist"></span></label></td><td><span id="titelhead" class="item"></span></td><td><label class="checkbox"><input id="head" type="checkbox" onClick="test()"><span id="deshead"></span></label></td></tr>
				<tr><td><span id="titelinfobar" class="item"></span></td><td><label class="checkbox"><input id="infobar" type="checkbox" onClick="test()"><span id="desinfobar"></span></label></td><td><span id="titelsharebutton" class="item"></span></td><td><label class="checkbox"><input id="sharebutton" type="checkbox" onClick="test()"><span id="dessharebutton"></span></label></td></tr>
				<tr><td><span id="titellikebutton" class="item"></span></td><td><label class="checkbox"><input id="likebutton" type="checkbox" onClick="test()"><span id="deslikebutton"></span></label></td><td><span id="titelsuggestions" class="item"></span></td><td><label class="checkbox"><input id="suggestions" type="checkbox" onClick="test()"><span id="dessuggestions"></span></label></td></tr>
				<tr><td><span id="titelvideoheadline" class="item"></span></td><td><label class="checkbox"><input id="videoheadline" type="checkbox" onClick="test()"><span id="desvideoheadline"></span></label></td><td><span id="titelviewcount" class="item"></span></td><td><label class="checkbox"><input id="viewcount" type="checkbox" onClick="test()"><span id="desviewcount"></span></label></td></tr>				
				</table></div>
				</section>
			</div>
			<div id="tab2" class="page hidden">
				<h1 id="visualeffectstitle"></h1>
				<section>
				<h3 id="titelfadein"></h3>
				<div><label class="checkbox"><input id="fadein" type="checkbox"><span id="desfadein"></span></label></div>
				</section>
				<section>
				<h3 id="titelfadeout"></h3>
				<div><label class="checkbox"><input id="fadeout" type="checkbox"><span id="desfadeout"></span></label></div>
				</section>
			</div>
			<div id="tab3" class="page hidden">
				<h1 id="advancedoptionstitle"></h1>
				<section>
				<h3 id="titelflash"></h3>
				<div>
				<label class="checkbox"><input id="flash" type="checkbox"><span id="desflash"></span></label>
				<div class="grey-text">Support: &lt;object&gt;, &lt;embed&gt;, &lt;applet&gt;, &lt;iframe&gt;.</div></div>
				</section>
				<section>
				<h3 id="titelreader"></h3>
				<div>
					<label class="radio"><input id="readera" type="radio" name="reader" value="only"><span id="desreadera"></span></label>
					<label class="radio"><input id="readern" type="radio" name="reader" value="never"><span id="desreadern"></span></label>
				</div>
				</section>
				<section>
				<h3 id="titeleye"></h3>
				<div>
					<label class="radio"><input id="eyen" type="radio" name="eye" value="never" onClick="test()"><span id="deseyen"></span></label>
					<label class="radio"><input id="eyea" type="radio" name="eye" value="always" onClick="test()"><span id="deseyea"></span></label>
					<label class="radio"><input id="eyealist" type="radio" name="eye" value="alwayslist" onClick="test()"><span id="deseyealist"></span></label>
				  <table id="EyeWhitelist">
 				   <tr>
 				     <td>Website:</td>
  				     <td><input id="websiteurl" type="url" required pattern="https?://.+" placeholder="http://www.example.com"></td>
 				     <td><button name="add" onclick="addWhitelistDomain();"><span id="addbutton"></span></button></td>
 				   </tr>
 				   <tr>
				      <td colspan="2"><select id="excludedDomainsBox" name="entryList" size="10" multiple=""></select></td>
				      <td valign="center"><button name="delete" onclick="removeSelectedExcludedDomain();"><span id="deletebutton"></span></button></td>
				    </tr>
				  </table>
				</div>
				</section>
				<section>
				<h3 id="titelshortcutlight"></h3>
				<div><label class="checkbox"><input id="shortcutlight" type="checkbox"><span>Ctrl + Shift + L</span> <span id="desshortcutlight"></span></label></div>
				</section>
				<section>
				<h3 id="titelcontextmenus"></h3>
				<div><label class="checkbox"><input id="contextmenus" type="checkbox"><span id="descontextmenus"></span></label></div>
				</section>
				<section>
				<h3>Lamp</h3>
				<div><label class="checkbox"><input id="pageaction" type="checkbox"><span id="titelpageaction"></span></label>
				<div class="grey-text"><span>Extra: <a href="https://chrome.google.com/webstore/detail/jfmfcimcjckbdhbbbbdemfaaphhgljgo" target="blank">TOTL Browser Button Extension</a></span></div></div>
				</section>
				<section>
				<h3>Mouse</h3>
				<div><label class="checkbox"><input id="mousespotlight" type="checkbox"><span>Mouse Spotlight</span></label></div>
				</section>
				<section>
				<h3>API Developer</h3>
				<div class="grey-text"><span>Turn Off the Lights <a href="http://code.google.com/p/turnoffthelights/wiki/APIwebsite" target="blank">Wiki API for Website Developer</a>.</span></div></div>
				</section>
			</div>
</div>
<script type="text/javascript">
$('slider').value = default_opacity;$('example').style.opacity = (default_opacity/100);function showValue(newValue){$('interval').value = newValue;$('slider').value = newValue;$('example').style.opacity = (newValue/100);}
// save all setting when change input -> no save button
var inputs = document.getElementsByTagName('input'); for(var i=0,ii=inputs.length;i<ii;i++){inputs[i].addEventListener("click", save_options);}
</script>
</body>
</html>